/*
* author:chuguancheng
* date:2017/11/16
* */

/*初始化当前时间*/
var currentDate = new Date();
/*左点击对象*/
var $firstLeft;
/*右点击对象*/
var $firstRight;
/*中间点击对象*/
var $choiceTime;

/*当前哪一天*/
var dateOfToday=currentDate.getDate();

/*访问过的数组*/
var visitedDay = new Array();
var visitedNumber=0;

/*获取日子格式1*/
function getDateFormat(date) {
    return date.getFullYear() + "年" + (date.getMonth()+1) + "月";
}

/*获取日子格式2*/
function getDateStandardFormat(date) {
    return date.getFullYear() + "/" + (date.getMonth()+1) + "/"+date.getDate();
}

/*初始化加载*/
$(function(){
    var weekName = ["日","一","二","三","四","五","六"];
    var monthName = ["一月","二月","三月","四月","五月","六月","七月"
        ,"八月","九月","十月","十一月","十二月"];
    var i=0,j=0;
    var count=0;
    var $table = $("<table id='myTable'></table>");

    /*日期控件框点击事件*/
    $("#blank-frame").click(function () {
        $table.empty();
        ;
        var text = $("#blank-frame").val();
        if(text == ""){
            currentDate=new Date()
        }else{
            currentDate=new Date(text);
        }
        init(currentDate);
    });

    /*鼠标移除控件框div事件*/
    $("#time-frame").mouseleave(function () {
        $table.empty();
        $("#blank-frame").val(getDateStandardFormat(currentDate));
    });

    /*出入日期进行初始化table*/
    function init(date) {
        $table.empty();
        dateOfToday=date.getDate();
        $("#blank-frame").val(date.getFullYear()+"/"+(date.getMonth()+1)+"/");
        /*第一行*/
        var $firstTr = $("<tr id='tr-0'></tr>");
        $firstLeft = $("<td id='turn-left'>＜</td>");
        $choiceTime = $("<td id='choiceTime'></td>");
        $firstRight = $("<td id='turn-right'>＞</td>");
        $choiceTime.text(getDateFormat(date));
        $firstTr.append($firstLeft);
        $firstTr.append($choiceTime);
        $firstTr.append($firstRight);
        $table.append($firstTr);

        /*第二行*/
        var $secondTr = $("<tr id='tr-1'></tr>");
        for(i=0;i<7;i++){
            $secondTr.append($("<td>"+weekName[i]+"</td>"));
        }
        $table.append($secondTr);

        /*为剩下行赋值*/
        var thisMonthDay = new Date(date.getFullYear(),(date.getMonth()+1),0).getDate();
        var lastMonthLastDay = new Date(date.getFullYear(),(date.getMonth()),0).getDate();
        var thisMonthFristDayWeek = new Date(date.getFullYear(),date.getMonth(),1).getDay();
        var recount=1;
        count=0;
        for(i=0;i<6;i++){
            var $numsTr = $("<tr id='tr-"+(i+2)+"'></tr>");
            for(j=0;j<7;j++){
                $numsTd = $("<td id='cell"+(count++)+"'></td>");
                if(count<=thisMonthFristDayWeek){
                    $numsTd.text(lastMonthLastDay-thisMonthFristDayWeek+j+1).css("color","#ccc");
                }else if(count>thisMonthDay+thisMonthFristDayWeek){
                    $numsTd.text(recount++).css("color","#ccc");
                }else{
                    $numsTd.text(count-thisMonthFristDayWeek).css("color","black");

                    $numsTd.attr("name","tip");
                }
                $numsTd.css("border-radius","4px").css("background-color","white");
                $numsTr.append($numsTd);
            }
            $table.append($numsTr);
        }

        /*最后一行*/
        var $endTr = $("<tr id='end'></tr>");
        var $today = $("<td id='endToday'>今天</td>");
        var $clear = $("<td id='endClear'>清空</td>");
        var $endInput = $("<td id='endInput'><input id='goDate'></td>");
        var $endGo = $("<td id='endGo'>Go</td>");
        $endTr.append($today).append($clear).append($endInput).append($endGo).appendTo($table);

        /*加入table中去*/
        $("#time-frame").append($table);

        /*展示被访问过的日期和当前是哪一天*/
        showVisitedDay();
        markToday();

        /*绑定左边按钮时间*/
        $firstLeft.click(function () {
            currentDate = new Date(currentDate.getFullYear(),currentDate.getMonth()-1);
            init(currentDate);
            console.log("lll");
        });

        /*绑定右边按钮事件*/
        $firstRight.click(function () {
            currentDate = new Date(currentDate.getFullYear(),currentDate.getMonth()+1);
            init(currentDate);
        });

        /*显示月份可选*/
        $choiceTime.click(function () {
            function initMonth() {
                $table.empty();

                /*第一行*/
                var $firstTr = $("<tr id='tr-0'></tr>");
                $firstLeft = $("<td id='turn-left'>＜</td>");
                $choiceTime = $("<td id='choiceTime'></td>");
                $firstRight = $("<td id='turn-right'>＞</td>");
                $choiceTime.text(getDateFormat(date));
                $firstTr.append($firstLeft);
                $firstTr.append($choiceTime);
                $firstTr.append($firstRight);
                $table.append($firstTr);

                /*剩下的12个月*/
                for(i=1;i<=3;i++){
                    var $someTr = $("<tr id='month'></tr>");
                    for(j=1;j<=4;j++){
                        var n=((i-1)*4+j);
                        var $someTd = $("<td value="+n+" id='month"+n+"'>"+monthName[n-1]+"</td>");
                        $someTr.append($someTd);
                    }
                    $table.append($someTr);
                }
                $choiceTime.text(currentDate.getFullYear()+"年");
                $("#blank-frame").val(currentDate.getFullYear()+"/");
                $("td[id*='month']").click(function () {
                    var month = $(this).attr("value");
                    currentDate = new Date(currentDate.getFullYear(),month-1);
                    init(currentDate);
                });

                /*绑定左边按钮时间*/
                $firstLeft.click(function () {
                    currentDate = new Date(currentDate.getFullYear()-1,currentDate.getMonth());
                    $choiceTime.text(currentDate.getFullYear()+"年");
                    initMonth();
                });

                /*绑定右边按钮事件*/
                $firstRight.click(function () {
                    currentDate = new Date(currentDate.getFullYear()+1,currentDate.getMonth()+1);
                    $choiceTime.text(currentDate.getFullYear()+"年");
                    initMonth();
                });

                /*进入第三层，显示每个十年*/
                $choiceTime.click(function (){
                    initTenYear();
                    function initTenYear() {
                        $table.empty();
                        var fromYear = currentDate.getFullYear()-currentDate.getFullYear()%10;
                        var toYear = fromYear+9;
                        /*第一行*/
                        var $firstTr = $("<tr id='tr-0'></tr>");
                        $firstLeft = $("<td id='turn-left'>＜</td>");
                        $choiceTime = $("<td id='choiceTime'></td>");
                        $firstRight = $("<td id='turn-right'>＞</td>");
                        $choiceTime.text(getDateFormat(date));
                        $firstTr.append($firstLeft);
                        $firstTr.append($choiceTime);
                        $firstTr.append($firstRight);
                        $table.append($firstTr);

                        /*剩下的10个年*/
                        for(i=1;i<=3;i++){
                            var $someTr = $("<tr id='year'></tr>");
                            for(j=1;j<=4;j++){
                                var n=((i-1)*4+j);
                                var $someTd;
                                if(n==1||n==12){
                                    $someTd = $("<td value="+n+" id='year"+n+"'>"+(fromYear-2+n)+"</td>");
                                    $someTd.css("color","#ccc");
                                }else{
                                    $someTd = $("<td value="+n+" id='year"+n+"'>"+(fromYear-2+n)+"</td>");
                                }
                                $someTr.append($someTd);
                            }
                            $table.append($someTr);
                            $choiceTime.text(fromYear+"-"+toYear);
                            $("#blank-frame").val("");
                        }

                        /*绑定左边按钮事件*/
                        $firstLeft.click(function () {
                            currentDate = new Date(currentDate.getFullYear()-10,currentDate.getMonth());
                            $choiceTime.text(currentDate.getFullYear()+"-"+currentDate.getFullYear()+9);
                            initTenYear();
                        });

                        /*绑定右边按钮事件*/
                        $firstRight.click(function () {
                            currentDate = new Date(currentDate.getFullYear()+10,currentDate.getMonth()+1);
                            $choiceTime.text(currentDate.getFullYear()+"-"+currentDate.getFullYear()+9);
                            initTenYear();
                        });

                        /*hover*/
                        $("td[id*='year']").hover(function () {
                            var choiceYear=$(this).text();
                            if((fromYear-1)!=choiceYear && (toYear+1)!=choiceYear){
                                $(this).css("background-color","#33AAFF").css("border-radius","4px");
                            }
                        },function () {
                            var choiceYear=$(this).text();
                            if((fromYear-1)!=choiceYear && (toYear+1)!=choiceYear){
                                $(this).css("background-color","white").css("border-radius","4px");
                            }
                        });

                        /*进入10年选择按钮*/
                        $("td[id*='year']").click(function () {
                            var choiceYear=$(this).text();
                            if((fromYear-1)!=choiceYear && (toYear+1)!=choiceYear){
                                currentDate = new Date(choiceYear,0);
                                initMonth(currentDate);
                            }
                        });
                    }

                });
            }
            initMonth();
        });

        /*单击获取日期*/
        $("td").click(function () {
            if($(this).attr("name") == "tip"){
                var date = $(this).text();
                currentDate.setDate(date);
                visitedDay[visitedNumber++]=new Date(currentDate.getFullYear(),currentDate.getMonth(),date);
                $("#blank-frame").val(getDateStandardFormat(currentDate));
                $table.empty();
            }
        });

        /*保存hover事件的变量*/
        var beforehover="white";

        /*日期的hover事件*/
        $("td[id*='cell'][name]").hover(function () {
            beforehover=$(this).css("background-color");
            if(dateOfToday == $(this).text()){
                $(this).css("background-color","#33AAFF").css("border-radius","4px");
            }else if(currentDate.getFullYear() == new Date().getFullYear()
                && currentDate.getMonth()==new Date().getMonth()
                && $(this).text() == new Date().getDate()){
                $(this).css("background-color","#33AAFF").css("border-radius","4px");
            }else {
                $(this).css("background-color","#33AAFF").css("border-radius","4px");
            }

        },function () {
            if(dateOfToday == $(this).text()){
                $(this).css("background-color",beforehover).css("border-radius","4px");
            }else if(currentDate.getFullYear() == new Date().getFullYear()
                && currentDate.getMonth()==new Date().getMonth()
                && $(this).text() == new Date().getDate()){
                $(this).css("background-color",beforehover).css("border-radius","4px");
            }else {
                $(this).css("background-color",beforehover).css("border-radius","4px");
            }
        });

        /*按钮的hover事件*/
        $("#endToday,#endClear,#endGo").hover(function(){
            beforehover=$(this).css("background-color");
            $(this).css("background-color","#86C133");
        },function () {
            $(this).css("background-color",beforehover);
        });

        $("#endInput").keypress(function(e) {
            if(e.which == 13) {
                goDate();
            }
        });

        /*获取今天日期*/
        $("#endToday").click(function () {
            currentDate = new Date();
            $("#blank-frame").val(getDateStandardFormat(currentDate));
            $table.empty();
        });

        /*清空日期*/
        $("#endClear").click(function () {
            $("#blank-frame").val("");
            $("#goDate").val("");
            visitedDay=[""];
            visitedNumber=0;
            showVisitedDay();
            markToday();
        });

        /*跳转到某一天*/
        $("#endGo").click(function () {
            goDate();
        });

        /*进入输入时间*/
        function goDate() {
            var text = $("#goDate").val();
            if(isDate(text)){
                var goDate = new Date(text);
                currentDate = goDate;
                $("#blank-frame").val(getDateStandardFormat(currentDate));
                init(goDate);
            }else{
                Alert("日期格式不对,必须为YYYY/MM/DD");
            }
        }

        /*展示被访问过的日期*/
        function showVisitedDay() {
            var currentDay;
            for(i=0;i<42;i++){
                $("#cell"+i).css("background-color","");
            }
            for(i=0;i<visitedNumber;i++){
                if(currentDate.getFullYear() == visitedDay[i].getFullYear() && currentDate.getMonth()==visitedDay[i].getMonth()){
                    currentDay = visitedDay[i].getDate()+new Date(visitedDay[i].getFullYear(),visitedDay[i].getMonth(),1).getDay()-1;
                    $("#cell"+currentDay).css("background-color","orangered").css("border-radius","4px");
                }
            }
        }

        /*日期是否符合格式*/
        function isDate(str) {
            if(!/^(\d{4})\/(\d{1,2})\/(\d{1,2})$/.test(str))
                return false;
            var year = RegExp.$1-0;
            var month = RegExp.$2-1;
            var date = RegExp.$3-0;
            var obj = new Date(year,month,date);
            return !!(obj.getFullYear()==year && obj.getMonth()==month && obj.getDate()==date);
        }

        /*标志今天*/
        function markToday() {
            var currentDay;
            if(currentDate.getFullYear()==new Date().getFullYear()
                && currentDate.getMonth()==new Date().getMonth()){
                currentDay = new Date().getDate()+ new Date(date.getFullYear(),date.getMonth(),1).getDay()-1;
            }else{
                currentDay = currentDate.getDate()+new Date(date.getFullYear(),date.getMonth(),1).getDay()-1;
            }
            $("#cell"+currentDay).css("background-color","green").css("border-radius","4px");
        }
    }
});

/*弹出的提示框*/
window.Alert = function(messages){
    if($(".chuguan-toast").length<1){
        $("body").append("<div class=\"chuguan-toast\">"+messages+"</div>");
    }
    leftW = (document.body.clientWidth-$(".chuguan-toast").width())/2;
    topH = (document.body.clientHeight-$(".chuguan-toast").height())/2;
    $(".chuguan-toast").css("top", topH+"px").css("left", leftW+"px").fadeIn(100);
    //谈出效果并执行回调
    showToast = setTimeout(function () {
        $(".chuguan-toast").animate({top:"100px",opacity:0},1000,function(){
            $(".chuguan-toast").remove();
            canClickButton=true;

        });
    },2000);
}